<template>
  <div>This is CountUp</div>
  <div class="demo-inner-divider">基本用法</div>
  <e-countUp :end="1234" :duration="6" ref="count" v-font="24" />
  <div>
    <e-button @click="handlePause">暂停/继续</e-button>
    <e-button @click="handleReset">重置</e-button>
    <e-button @click="handleStart">开始</e-button>
    <e-button @click="handleUpdate">更新至：</e-button>
    <e-inputNumber v-model="update" :min="1" :max="10000" />
  </div>

  <div class="demo-inner-divider">设置属性 decimals 指定小数位数。</div>
  <e-CountUp :end="1234" :duration="6" :decimals="2" ref="count1" v-font="20" />
  <div>
    <e-button @click="handleRestart">重新开始</e-button>
  </div>

  <div class="demo-inner-divider">设置属性 callback 可以在结束时继续完成操作。</div>
  <e-countUp :end="end" :duration="3" :callback="handleUpdate1" ref="count2" v-font="20" />
  <div>
    <e-button @click="handleRestart1">重新开始</e-button>
  </div>
  
  <div class="demo-inner-divider">不显示分隔符及 easing 动画</div>
  <div>
    <e-countUp :end="1234" :duration="6" :options="options" ref="count3" v-font="20" />
  </div>
  <div>
    <e-button @click="handleRestart2">重新开始</e-button>
  </div>
  <countUpMd class="markdown-body" style="margin-top:20px"/>
</template>

<script setup>
import {ref,reactive} from "vue"

import countUpMd from "../../docs/count-up.md"
const count=ref();
const count1=ref();
const count2=ref();
const count3=ref();
let end=ref(50);
let update=ref(5000)
const options=reactive({
  useEasing: false,
  useGrouping: false
})

const handlePause= ()=> {
  count.value.pauseResume();
}
const handleReset= ()=> {
  count.value.reset();
}
const handleStart= ()=> {
  count.value.start();
}
const handleUpdate= () =>{
  count.value.update(update.value);
}

const handleRestart=()=>{
  count1.value.reset();
  count1.value.start();
}

const handleUpdate1=()=>{
  setTimeout(() => {
    end.value = 100;
  }, 1000);
}

const handleRestart1=()=>{
  end.value = 50;
  count2.value.reset();
  count2.value.start(handleUpdate1);
}

const handleRestart2=()=>{
  count3.value.reset();
  count3.value.start();
}
</script>
